<template>
  <div v-if="detail">
    <MainSearchDetail v-model="visible"
                      :title="title">
      <div class="car-popup-cont-left">
        <div class="people-search-detail-left">
          <div class="left-img">
            <img :src="detail.personphoto ? detail.personphoto : personImg">
          </div>
          <div class="left-btns">
            <div class="left-btns-item"
                 @click.stop="onClickTrack">
              <Icon custom="i-icon icon-guiji"
                    size="22" />
              历史轨迹
            </div>
            <div class="left-btns-item"
                 :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
                 @click.stop="onClickVideo">
              <Icon custom="i-icon icon-jiankong11"
                    size="22" />
              摄像头
            </div>
          </div>
        </div>
      </div>

      <div class="car-popup-cont-right">
        <div class="people-search-detail-right detail-popup-right">
          <div class="right-top">
            <div class="popup-title border-bottom">
              基本信息
            </div>
            <div class="right-top-row2">
              <div class="right-top-row2-title">
                <img src="../../../../assets/main/personImg1.png">
                <div class="right-top-row2-title-base">
                  <div>{{ detail.name ? detail.name : '- -' }}</div>
                  <div>
                    <Icon custom="i-icon icon-dianhua1"
                          size="18"
                          color="#eee" />
                    {{detail.phonenum ? detail.phonenum : '- -'}}
                  </div>
                </div>
              </div>
              <div class="right-top-row2-item">
                <p>工种<span>{{ detail.worktypename || '- -' }}</span></p>
                <p>工号<span>{{ detail.emplnum || '- -' }}</span></p>
              </div>
              <div class="right-top-row2-item">
                <p>民族<span>{{ detail.nation || '- -' }}</span></p>
                <p>性别<span>{{ detail.sex || '- -' }}</span></p>
              </div>
              <div class="right-top-row2-item">
                <p>籍贯<span>{{ detail.nativeplace || '- -' }}</span></p>
                <p>入职日期<span>{{ detail.entrytime ? detail.entrytime.split(' ')[0] : '- -' }}</span></p>
              </div>
            </div>
            <div class="right-top-row3">
              <div class="row3-title">劳保信息</div>
              <div class="row3-cont">
                <div>身高 {{ detail.personheight || '- -' }}cm</div>
                <div>体重 {{ detail.personweight || '- -' }}kg</div>
                <div>鞋码 {{ detail.shoesize || '- -' }}</div>
                <div>工服尺寸 {{ detail.clothessize || '- -' }}</div>
              </div>
            </div>
          </div>

          <div class="right-bottom">
            <div class="bottom-work">
              <div class="popup-tab border-bottom work-title">
                <ul>
                  <li @click.stop="onClickDetailPeopleWork(0)"
                      :class="{'current':detailPeopleWorkIndex == 0}">作业概况</li>
                  <li @click.stop="onClickDetailPeopleWork(1)"
                      :class="{'current':detailPeopleWorkIndex == 1}">作业记录</li>
                  <DatePicker :value="workDate"
                              type="date"
                              style="width: 120px"
                              @on-change="onChangeWorkDate"></DatePicker>
                </ul>
              </div>
              <div class="work-cont noScroll">
                <div v-show="detailPeopleWorkIndex == 0"
                     class="work-cont-record">
                  <div class="noData"
                       v-if="workCaseArr.length == 0">
                    <img src="../../../../assets/main/blank_black.png">
                    <p>暂无数据</p>
                  </div>
                  <div class="record-item"
                       v-for="(item,index) in workCaseArr"
                       :key="index">
                    <div class="flex j-between title cont-item">
                      <p>{{item.shiftName || '--'}}({{getWorkTime(item.planStartTime)}} ~ {{getWorkTime(item.planEndTime)}})</p>
                      <p>作业计划：{{item.planName}}</p>
                    </div>
                    <div class="flex j-between clock-box cont-item">
                      <div class="item">
                        <div>{{item.punchCardStartTime || '- -'}}</div>
                        <div v-if="item.isLaterIn == 0 && item.isNoWork == 0"
                             class="success">
                          <Icon custom="i-icon icon-zhengchang"
                                size="16" />
                          正常
                        </div>
                        <div v-if="item.isNoWork == 1"
                             class="err">
                          <Icon custom="i-icon icon-baojing1"
                                size="16" />
                          旷工
                        </div>
                        <div v-if="item.isLaterIn == 1"
                             class="err">
                          <Icon custom="i-icon icon-baojing1"
                                size="16" />
                          迟到
                        </div>
                      </div>
                      <div class="item">
                        <div>{{getWorkTime(item.punchCardEndTime) || '- -'}}</div>
                        <div v-if="item.isLeaveEarly == 0 && item.isNoWork == 0"
                             class="success">
                          <Icon custom="i-icon icon-zhengchang"
                                size="16" />
                          正常
                        </div>
                        <div v-if="item.isNoWork == 1"
                             class="err">
                          <Icon custom="i-icon icon-baojing1"
                                size="16" />
                          旷工
                        </div>
                        <div v-if="item.isLeaveEarly == 1"
                             class="err">
                          <Icon custom="i-icon icon-baojing1"
                                size="16" />
                          早退
                        </div>
                      </div>
                    </div>
                    <div class="flex j-between cont-item m-b-20">
                      <p>网格名称：{{item.gridName}}</p>
                      <p>作业时长：{{item.workTotalTime || '- -'}}</p>
                    </div>
                    <div class="flex a-center cont-item m-b-20">
                      <Icon custom="i-icon icon-dizhi1"
                            size="16" />
                      <p class="m-l-5">{{item.punchCardAddress || '- -'}}</p>
                    </div>
                  </div>
                </div>
                <template v-if="detailPeopleWorkIndex == 1">
                  <div class="work-case">
                    <div class="noData"
                         v-if="workRecordArr.length == 0">
                      <img src="../../../../assets/main/blank_black.png">
                      <p>暂无数据</p>
                    </div>
                    <div class="work-cont-points"
                         v-for="(item,index) in workRecordArr"
                         :key="index">
                      <ul>
                        <li>
                          <label>作业对象：</label>
                          <span>{{item.gridName || '- -'}}</span>
                        </li>
                        <!-- 有排班才会显示作业类型，只要道路保洁 -->
                        <li v-if="item.jobType">
                          <label>作业类型：</label>
                          <span>{{item.jobType}}</span>
                        </li>
                        <li>
                          <label>提交时间：</label>
                          <span>{{getWorkTime(item.createTime)}}</span>
                        </li>
                        <li>
                          <label>完成情况：</label>
                          <span>{{item.content}}</span>
                        </li>
                      </ul>
                      <div class="multimedia">
                        <div class="item video-item"
                             v-previewVideo="item.videourl"
                             v-if="item.videourl">
                          <Icon custom="i-icon icon-bofang"
                                size="25"
                                color='#fff'></Icon>
                        </div>
                        <div class="item"
                             v-for="(items,indexs) in item.imgurls"
                             :key="indexs">
                          <el-image :src="items"
                                    fit="cover"
                                    :preview-src-list="[items]"
                                    class="detail-top-img"
                                    v-if="item.imgurls.length != 0">
                          </el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div class="bottom-calendar">
              <div class="popup-title border-bottom">
                <div>出勤日历</div>
              </div>
              <div class="calendar workCalendar">
                <el-calendar v-model="workCalendar">
                  <template slot="dateCell"
                            slot-scope="{date, data}">
                    <!-- 非当月 -->
                    <div v-if="data.type != 'current-month'"
                         @click.stop>
                    </div>
                    <!-- 当月 -->
                    <div v-else
                         class="cont"
                         :class="{'day-after':isBeyondDate(data.day),'cursor-pointer':getWorkCalendarDate(data.day) || getViolationCalendarDate(data.day),'success':getWorkCalendarDate(data.day)}"
                         @click.stop="onClickCalendar(data.day)">
                      <p>
                        {{ data.day.split('-')[2]}}
                      </p>
                      <div class="cont-status">
                        <!-- <span class="success"
                              v-if="getWorkCalendarDate(data.day) && !getViolationCalendarDate(data.day)"></span> -->
                        <span class="err"
                              v-if="getViolationCalendarDate(data.day)"></span>
                      </div>
                    </div>
                  </template>
                </el-calendar>
              </div>
              <div class="case noScroll"
                   v-if="calendarCaseVisible">
                <div class="case-date"
                     @click.stop="calendarCaseVisible=false">
                  {{workCalendarModalData.date}}
                  <Icon custom="i-icon icon-guanbi"
                        size="18" />
                </div>
                <div class="case-cont">
                  <div>
                    <p>作业状况</p>
                    <span :class="[workCalendarModalData.work == 0 ? 'normal' : 'abnormal']">
                      <Icon custom="i-icon icon-zhengchang"
                            size="16"
                            v-if="workCalendarModalData.work == 0" />
                      <Icon custom="i-icon icon-baojing1"
                            size="16"
                            v-else />
                      {{workCalendarModalData.work == 0 ? '正常' : '异常'}}
                    </span>
                  </div>
                  <div>
                    <p>考勤状况</p>
                    <span :class="[workCalendarModalData.violation == 0 ? 'normal' : 'abnormal']">
                      <Icon custom="i-icon icon-zhengchang"
                            size="16"
                            v-if="workCalendarModalData.violation == 0" />
                      <Icon custom="i-icon icon-baojing1"
                            size="16"
                            v-else />
                      {{workCalendarModalData.violation == 0 ? '正常' : '异常'}}
                    </span>
                  </div>
                </div>
                <div class="case-attendance">
                  <p class="case-attendance-title">出勤情况</p>
                  <ul class="case-attendance-cont">
                    <li v-for="(item,index) in workCalendarModalData.workArr"
                        :key="index">
                      <p>{{item.shiftName}} {{item.planStartTime}}-{{item.planEndTime}}</p>
                      <p>
                        上班({{item.punchCardStartTime || '--:--'}}<span v-if="item.isLeaveEarly == 1"
                              class="later"> 迟到</span>)
                      </p>
                      <p>
                        下班({{item.punchCardEndTime || '--:--'}}<span v-if="item.isLeaveEarly == 1"
                              class="leave"> 早退</span>)
                      </p>
                    </li>
                  </ul>
                  <div class="noData"
                       v-if="workCalendarModalData.workArr.length == 0">
                    <p>暂无出勤情况</p>
                  </div>
                </div>
                <div class="work-violation">
                  <p class="work-violation-title">作业违规</p>
                  <ul>
                    <li v-for="(item,index) in workCalendarModalData.violationArr"
                        :key="index">
                      <span></span>
                      <p>{{getWorkTime(item.alarmTime)}} {{item.content}}</p>
                    </li>
                  </ul>
                  <div class="noData"
                       v-if="workCalendarModalData.violationArr.length == 0">
                    <p>暂无违规情况</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MainSearchDetail>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import MainSearchDetail from "./MainSearchDetail.vue";
import Echarts from '../../../common/Echarts';
import { formatDate } from '@/utils/dateRangUtil';
export default {
  components: {
    MainSearchDetail,
    Echarts
  },
  data () {
    return {
      visible: false,
      dataId: '',
      title: '',
      detail: {},
      detailPeopleWorkIndex: 0,
      personImg: require('../../../../assets/main/personImg.png'),
      // 异常状况
      calendarCaseVisible: false, // 点击页面显示弹框
      workDate: '',   // 作业概况 作业记录的日期选择器
      workMonth: [],  // 作业日历的月份
      violationDate: [],    // 异常日历的月份
      workCaseArr: [],  // 作业概况列表
      workRecordArr: [],  // 作业记录列表
      workCalendar: new Date(),   // 出勤日历
      workCalendarArr: [],  // 作业日历列表
      violationCalendarArr: [], // 违规日历列表
      workCalendarModalData: {
        date: '',
        violation: 0,    // 0正常，1异常
        work: 0,    // 0正常，1异常
        workArr: [],
        violationArr: [],
      }
    }
  },
  watch: {
    dataId (newVal) {
      if (newVal) {
        this.getDetail()
        this.getWorkList()
        this.getWorkCalendarList()
        this.getViolationCalendarList()
      }
    },
    visible (newVal) {
      if (!newVal) {
        this.dataId = ''
        this.detailPeopleWorkIndex = 0
        this.calendarCaseVisible = false
        this.workCalendar = new Date()
        this.timeInit()
      }
    },
    calendarCaseVisible (newVal) {
      if (!newVal) {
        this.workCalendarModalData = {
          date: '',
          violation: 0,
          work: 0,
          workArr: [],
          violationArr: [],
        }
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      bus.$on('showMainSearchPersonDetail', data => {
        this.dataId = data.id
        this.title = data.title
        this.visible = true
      })
      this.timeInit()
      // 作业日历组件上个月添加点击事件
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          '.workCalendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
        prevBtn.addEventListener('click', () => {
          this.onClickWorkMonthList()
        })
      })
      // 作业日历组件下个月添加点击事件
      this.$nextTick(() => {
        // 点击后一个月
        let prevBtn = document.querySelector(
          '.workCalendar .el-calendar__button-group .el-button-group>button:last-child');
        prevBtn.addEventListener('click', () => {
          this.onClickWorkMonthList()
        })
      })
    },
    getDetail () {
      let params = {
        id: this.dataId
      }
      this.$http.getPersonDetail(params).then((res) => {
        if (res.code == 200) {
          let data = res.result;
          this.detail = data;
          // 使用详情接口返回的绑定账号的id
          if (this.detail.bindaccount) {
            this.getWorkRecordList(this.detail.bindaccount)
          }
        }
      })
    },
    // 获取作业概况
    getWorkList () {
      let params = {
        employeeId: this.dataId,
        workDate: this.workDate
      }
      this.$http.getMapPeosonWorkList(params).then((res) => {
        if (res.code === 200) {
          this.workCaseArr = res.result.list
          this.workCaseArr.forEach(item => {
            let time = this.$timeDifference(item.punchCardStartTime, item.punchCardEndTime)
            if (isNaN(time[0]) && isNaN(time[1])) {
              item.workTotalTime = ''
            } else {
              item.workTotalTime = time[0] > 0 ? time[0] + '小时' + time[1] + '分钟' : time[1] + '分钟'
            }
          })
        }
      })
    },
    // 获取作业记录
    getWorkRecordList (id) {
      let params = {
        pageNum: 1,
        pageSize: 99999,
        uId: id,
        nowtime: this.workDate,
      }
      this.$http.getMapWorkRecordList(params).then((res) => {
        if (res.code == 200) {
          this.workRecordArr = res.result.result.rows.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
        }
      })
    },
    // 获取作业日历
    getWorkCalendarList () {
      let params = {
        employeeId: this.dataId,
        workMonth: this.workMonth
      }
      this.$http.getMapPeosonWorkList(params).then((res) => {
        if (res.code === 200) {
          this.workCalendarArr = res.result.list
        }
      })
    },
    // 获取违规日历
    getViolationCalendarList () {
      let params = {
        employeeId: this.dataId,
        starttime: this.violationDate[0],
        endtime: this.violationDate[1]
      }
      this.$http.getMapPeosonViolationList(params).then((res) => {
        if (res.code === 200) {
          let data = res.result
          this.violationCalendarArr = data
        }
      })
    },
    // 作业日历点击上月下月触发
    onClickWorkMonthList () {
      // 作业
      let timeArr = formatDate(this.workCalendar).split('-')
      this.workMonth = timeArr[0] + '-' + timeArr[1]
      // 违规
      let day = new Date(timeArr[0], timeArr[1], 0)
      let startTime = timeArr[0] + '-' + timeArr[1] + '-01 00:00:00'
      let endTime = timeArr[0] + '-' + timeArr[1] + '-' + day.getDate() + ' 23:59:59'
      this.violationDate = [startTime, endTime]
      this.getWorkCalendarList()
      this.getViolationCalendarList()
    },
    timeInit () {
      let time = formatDate(new Date())
      let timeArr = time.split('-')
      this.workDate = time
      this.workMonth = timeArr[0] + '-' + timeArr[1]

      let lastDay = new Date(timeArr[0], timeArr[1], 0)
      let startTime = timeArr[0] + '-' + timeArr[1] + "-01 00:00:00"
      let endTime = timeArr[0] + '-' + timeArr[1] + '-' + lastDay.getDate() + ' 23:59:59'
      this.violationDate = [startTime, endTime]
    },
    // 人员详情 工作tab切换
    onClickDetailPeopleWork (i) {
      this.detailPeopleWorkIndex = i
    },
    // 点击日历某一天
    onClickCalendar (date) {
      if (!this.getWorkCalendarDate(date) && !this.getViolationCalendarDate(date)) return
      // 当天有排班的考勤段列表
      let workArr = []
      this.workCalendarArr.forEach(item => {
        if (item.workDate == date) {
          // 出勤情况是否异常
          if (item.isLaterIn == 1 || item.isLeaveEarly == 1 || item.isNoWork == 1) {
            this.workCalendarModalData.work = 1
          }
          // 出勤情况
          workArr.push({
            shiftName: item.shiftName,
            planStartTime: this.getWorkTime(item.planStartTime),
            planEndTime: this.getWorkTime(item.planEndTime),
            punchCardStartTime: item.punchCardStartTime,
            punchCardEndTime: item.punchCardEndTime,
            isLaterIn: item.isLaterIn,
            isLeaveEarly: item.isLeaveEarly,
            isNoWork: item.isNoWork,
          })
        }
      })
      this.workCalendarModalData.workArr = workArr
      // 作业状况是否异常
      let violation = this.getViolationCalendarDate(date)
      if (violation) {
        this.workCalendarModalData.violation = 1
      }

      // 违规情况
      let arr = []
      this.violationCalendarArr.forEach(item => {
        if (item.alarmTime.split(' ')[0] == date) {
          arr.push(item)
        }
      })
      this.workCalendarModalData.violationArr = arr
      this.workCalendarModalData.date = date
      this.calendarCaseVisible = true
    },
    // 是否超出日期
    isBeyondDate (date) {
      return formatDate(new Date()) < date
    },
    // 某天是否有排班
    getWorkCalendarDate (date) {
      return this.workCalendarArr.find(item => item.workDate.split(' ')[0] == date)
    },
    // 某天是否有异常
    getViolationCalendarDate (date) {
      return this.violationCalendarArr.find(item => item.alarmTime.split(' ')[0] == date)
    },
    // 作业记录 作业概况选择日期
    onChangeWorkDate (date) {
      this.workDate = date
      this.getWorkList()
    },
    // 作业概况时间 去掉年月日
    getWorkTime (time) {
      if (time) {
        let arr = time.split(' ')
        let date = arr[1].split(':')
        date.splice(2, 1)
        return date.join(':')
      } else {
        return ''
      }
    },
    // 摄像头
    onClickVideo () {
      if (this.detail.videoonlinestatus == 0) {
        let params = {
          equipcode: this.detail.equipcode,
          eqptype: this.detail.eqptype,
          details: this.detail.channels,
        }
        bus.$emit('showPlayVideoModal', params)
      }
    },
    // 轨迹
    onClickTrack () {
      let name = `${this.detail.name}[${this.detail.worktypename}]`
      const { href } = this.$router.resolve({
        name: 'track',
        query: { type: 'person', id: this.detail.id, name: name, carType: '' }
      })
      window.open(href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/input";
@import "@/scss/iviewCssReset/modal";
@import "@/scss/iviewCssReset/elCalendar";
@import "@/scss/iviewCssReset/datePicker";

.car-popup-cont-left {
  margin-right: 78px;
  width: 450px;
}

.car-popup-cont-right {
  width: 830px;
}

/* 人员左 */
.people-search-detail-left {
  .left-img {
    display: flex;
    justify-content: center;
    margin-top: 70px;
    margin-bottom: 40px;
    width: 100%;

    img {
      // width: 197px;
      height: 490px;
    }
  }

  .left-btns {
    display: flex;
    justify-content: space-around;
    margin: auto;

    .left-btns-item {
      display: flex;
      justify-content: center;
      width: 120px;
      height: 58px;
      background-image: url(../../../../assets/main/btn_bg.png);
      background-size: 100%;
      color: #eee;
      padding-top: 8px;
      cursor: pointer;
    }
  }
}

/* 人员右 */
.people-search-detail-right {
  .right-top {
    border: 1px solid rgba(255, 255, 255, 0.1);

    .right-top-row2 {
      display: flex;
      box-sizing: border-box;
      padding: 16px 24px;
      color: rgba(255, 255, 255, 0.7);

      .right-top-row2-title {
        width: 40%;
        display: flex;

        img {
          margin-right: 24px;
          width: 62px;
          height: 62px;
          border-radius: 62px;
          cursor: default;
        }

        .right-top-row2-title-base {
          div:first-child {
            margin-bottom: 10px;
            color: #eee;
            font-size: 18px;
          }
        }
      }

      .right-top-row2-item {
        width: 20%;

        p {
          margin-top: 6px;
          margin-bottom: 10px;

          span {
            color: #eee;
            margin-left: 5px;
          }
        }
      }
    }

    .right-top-row3 {
      height: 35px;
      display: flex;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);

      .row3-title {
        background-color: rgba(255, 255, 255, 0.2);
        width: 110px;
        text-align: center;
        height: 35px;
        line-height: 35px;
        color: #eee;
      }

      .row3-cont {
        flex: 1;
        display: flex;
        justify-content: space-around;

        div {
        }
      }
    }
  }
}

/* 右侧公共样式 */
.detail-popup-right {
  /* 详情公共样式 stard */
  .popup-tab {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    height: 51px;
    align-items: center;

    .current {
      color: #25bb96 !important;
    }
  }

  .popup-title {
    height: 51px;
    line-height: 51px;
    color: #eee;
    font-size: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;

    .current {
      color: #25bb96;
      position: relative;
    }

    .current::after {
      content: "";
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 4px solid #25bb96;
    }
  }

  .popup-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  .border-bottom {
    position: relative;
  }

  .border-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  /* 人员右侧下方 */
  .right-bottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    min-height: 350px;

    .bottom-work {
      width: 49%;
      border: 1px solid rgba(255, 255, 255, 0.1);

      .work-title {
        ul {
          display: flex;
          align-items: center;
          flex: 2;

          li {
            flex: 1;
            font-size: 18px;
            color: #fff;
            // font-weight: bold;
            cursor: pointer;
          }
        }
      }

      .work-cont {
        height: 435px;
        color: #ffffff;
        box-sizing: border-box;
        overflow-y: auto;
        .work-case {
          padding: 20px;
        }
        // 作业记录
        .work-cont-points {
          margin-bottom: 10px;
          ul {
            li {
              margin-bottom: 10px;
            }
          }
          .multimedia {
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 32%;
              margin-right: 2%;
              img {
                width: 100%;
              }
            }
            .item:nth-child(3n) {
              margin-right: 0;
            }
            .video-item {
              position: relative;
              background: #797979;
              i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
        // 作业概况
        .work-cont-record {
          .record-item {
            .cont-item {
              padding: 0 16px;
            }
            .title {
              height: 48px;
              line-height: 48px;
              font-size: 16px;
              color: #fff;
              background: #454c52;
            }
            .clock-box {
              display: flex;
              justify-content: space-between;
              padding: 16px;

              .item {
                width: 152px;
                height: 30px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #fff;

                div {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 30px;
                  width: 49%;
                  vertical-align: middle;
                  font-size: 12px;
                }

                div:first-child {
                  border-right: 1px solid rgba(255, 255, 255, 0.2);
                }

                .success {
                  color: rgba(255, 255, 255, 0.4);
                }

                .err {
                  color: rgb(235, 97, 0);
                }
              }
            }
          }
        }
      }
    }

    .bottom-calendar {
      position: relative;
      width: 49%;
      border: 1px solid rgba(255, 255, 255, 0.1);

      .popup-title {
        div {
          margin-right: 20px;
          cursor: pointer;
        }
      }

      // 日历组件
      .calendar {
        .cont {
          .cont-status {
            span {
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 8px;
              text-align: center;
            }
            .err {
              background: #f68315;
            }
            .success {
              // background: rgba(255, 255, 255, 0.4);
            }
          }
        }
        .success {
          color: #fff;
          p {
            background: #25bb96;
          }
        }
      }

      // 弹框
      .case {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 12px 0 #25bb96;
        background: #000;
        overflow-y: auto;
        .case-date {
          display: flex;
          justify-content: space-between;
          height: 32px;
          background: rgba(255, 255, 255, 0.1);
          align-items: center;
          color: #eee;
          padding-left: 20px;
          padding-right: 10px;
          i {
            cursor: pointer;
          }
        }
        .case-cont {
          display: flex;
          align-items: center;
          height: 75px;
          padding: 0 30px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          div {
            flex: 1;
            p {
              color: #eee;
              margin-bottom: 10px;
            }
            .normal {
              color: rgb(50, 177, 108);
            }
            .abnormal {
              color: rgb(235, 97, 0);
            }
          }
        }
        .case-attendance {
          padding: 20px;
          color: rgba(255, 255, 255, 0.7);
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          .case-attendance-title {
            display: flex;
            justify-content: space-between;
            height: 32px;
            align-items: center;
            padding-right: 10px;
            color: #eee;
          }
          .case-attendance-cont {
            li {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              p {
                // flex: 1;
                .later {
                  color: #ff0000;
                }
                .leave {
                  color: yellow;
                }
              }
            }
          }
        }
        .work-violation {
          padding: 20px;
          color: rgba(255, 255, 255, 0.7);
          .work-violation-title {
            display: flex;
            justify-content: space-between;
            height: 32px;
            align-items: center;
            padding-right: 10px;
            color: #eee;
            // margin-bottom: 12px;
          }
          ul {
            li {
              display: flex;
              align-items: center;
              line-height: 25px;
              span {
                width: 10px;
                height: 10px;
                margin-right: 5px;
                display: inline-block;
                background: #f68315;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }

  /* 详情公共样式 end */
}
</style>
